@import '~@hi-ui/core-css/lib/index.scss';

$prefix: '#{$component-prefix}-switch' !default;

.#{$prefix} {
  &:not(.#{$prefix}--disabled):focus {
    outline: 0;
    z-index: 1;
    box-shadow: 0 0 0 2px use-color-mode('primary', 200);
  }

  display: inline-flex;
  border-radius: use-border-radius('full');
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  flex: none;
  flex-shrink: 0;
  width: fit-content;

  &:not(.#{$prefix}--disabled) {
    background: use-color-mode('primary');
  }

  &--closed:not(.#{$prefix}--disabled) {
    background: use-color('gray', 400);
  }

  &--open.#{$prefix}--disabled {
    background: use-color-mode('primary', 50);
  }

  &--closed.#{$prefix}--disabled {
    background: use-color('gray', 100);
  }

  &--disabled {
    cursor: not-allowed;
  }

  &::after {
    content: '';
    background: use-color-static('white');
    position: absolute;
    border-radius: use-border-radius('full');
    top: calc((#{use-height-size(6)} - #{use-height-size(4)}) / 2);

    // @animation
    transition-duration: use-motion-duration('normal');
    transition-timing-function: use-motion-bezier('normal');
    transition-property: all;
    will-change: left;
  }

  &__text {
    color: use-color-static('white');
    user-select: none;

    // @animation
    transition-duration: use-motion-duration('normal');
    transition-timing-function: use-motion-bezier('normal');
    transition-property: all;
    will-change: margin;
  }

  &--closed {
    &::after {
      left: use-spacing(2);
    }
  }

  &--size-sm {
    min-width: use-height-size(8);
    height: use-height-size(4);

    &::after {
      width: use-height-size(2);
      height: use-height-size(2);
    }

    &.#{$prefix}--open {
      &::after {
        left: calc(100% - #{use-height-size(2)} - #{use-spacing(2)});
      }

      .#{$prefix}__text {
        margin: 0 use-spacing(7) 0 use-spacing(3);
      }
    }

    &.#{$prefix}--closed {
      .#{$prefix}__text {
        margin: 0 use-spacing(3) 0 use-spacing(7);
      }
    }

    .#{$prefix}__text {
      font-size: use-text-size('sm');
      line-height: use-height-size(4);
      margin: 0 use-spacing(7) 0 use-spacing(4);
    }
  }

  &--size-md {
    min-width: use-height-size(9);
    height: use-height-size(5);

    &::after {
      width: use-height-size(3);
      height: use-height-size(3);
    }

    &.#{$prefix}--open {
      &::after {
        left: calc(100% - #{use-height-size(3)} - #{use-spacing(2)});
      }
    }

    &.#{$prefix}--closed {
      .#{$prefix}__text {
        margin: 0 use-spacing(4) 0 use-spacing(9);
      }
    }

    .#{$prefix}__text {
      font-size: use-text-size('sm');
      line-height: use-height-size(5);
      margin: 0 use-spacing(9) 0 use-spacing(4);
    }
  }

  &--size-lg {
    min-width: use-height-size(10);
    height: use-height-size(6);

    &::after {
      width: use-height-size(4);
      height: use-height-size(4);

    }

    &.#{$prefix}--open {
      &::after {
        left: calc(100% - #{use-height-size(4)} - #{use-spacing(2)});
      }
    }

    &.#{$prefix}--closed {
      .#{$prefix}__text {
        margin: 0 use-spacing(4) 0 use-spacing(11);
      }
    }

    .#{$prefix}__text {
      font-size: use-text-size('md');
      line-height: use-height-size(6);
      margin: 0 use-spacing(11) 0 use-spacing(4);
    }
  }
}
